import React from "react";
import { Form, Input, Checkbox, Button, message } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router";
import './style/login.scss'
import axios from "axios";

export default function Login() {
  // 路由跳转
  const navigate = useNavigate()
  // 使用useDispatch调用action修改数据
  const dispatch = useDispatch()
  // 使用 useSelector 来获取数据
  // const { token, count } = useSelector(state => state)
  // 校验成功的回调
  const onFinish = (value) => {
    // console.log('value', value);
    axios.post('/goods/login', value).then(res => {
      let resData = res.data
      if (resData.status === 200) {
        // 获取接口
        axios.post('http://192.168.3.123:3303/menu/sendData', { name: '123' }).then(res => {
          console.log();
          let routes = res.data.result
          dispatch({ type: 'setRoute', value: routes })
          message.success('登录成功！');
          // 将token存在sessionStorage中
          window.sessionStorage.setItem(
            "token",
            resData.token
          );
          // 路由跳转和传参
          navigate('/home/option1', { state: { token: resData.token } })

          // 将token存在redux中（页面刷新token将会丢失）
          // 想要触发两个action要调用2次dispatch
          dispatch({
            type: 'add_token',
            value: resData.token
          })
        }).catch(err => {
          console.log(err);
          Promise.reject(err)
        })

      } else {
        message.error(resData.message);
      }
    }).catch(err => console.log(err))
  }
  // 校验失败的回调
  const onFinishFailed = (errInfo) => {
    message.error(`${errInfo.values.username ? errInfo.values.password ? '' : '密码为空' : '用户名为空'}，请重新输入！`);
    console.log('errInfo', errInfo);
  }
  return (
    <div className="container">
      {/* <i className="iconfont">&#xe607;</i> */}
      {/* <div>token:{token}</div>
      <div>count:{count}</div> */}
      <Form
        name="basic"
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 14,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        >
          <Input placeholder="账号：admin" prefix={<i className="iconfont icon-admin" />} />
        </Form.Item>
        <Form.Item
          label="Password"
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码！',
            },
          ]}
        >
          <Input.Password placeholder="密码：123" prefix={<i className="iconfont icon-suoding" />} />
        </Form.Item>
        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{
            offset: 6,
            span: 16,
          }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 6,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
      {/* <AppRouter/> */}
    </div>
  )
}
